<template>
  <div :style="styleObject" class="scale-box">
    <slot>

      <div>
             <div class="boxadad">
           撒大大大苏打实打实大苏打
        </div>
         <div class="boxadad2">
aaaa
            </div>
      </div>
    </slot>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive, onMounted ,
computed,
watch,
onUnmounted
} from 'vue';
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/


const prop =   defineProps({
     width:  {
      type: Number,
       default: 1920,
    },
     height:  {
      type: Number,
        default: 1080,
    },
    module:{
      type: String,
      default: 'scrollY',//FIT 按照比例渲染  scrollY  上下滚动 scrollX 左右滚动  full 整体不按照比例铺满
    }
})


 let  getScale = ()=> {
      // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
      return document.documentElement.clientWidth / prop.width
    }
     let  setScale = ()=> {
        // 获取到缩放比，设置它
      let scale = getScale()
      state.scale = scale
    }
 
const styleObject = computed(() => {
   let obj = {
       
      
      }
      if(prop.module === 'fit'){
        return {
          transform: `scale(${state.scale})`,
        WebkitTransform: `scale(${state.scale})`,
            width: prop.width + "px",
        height: prop.height + "px",
         overflow: 'hidden'
        }
      }else if(prop.module === 'scrollY'){
        return {
                   transform: `scale(${state.scale})`,
        WebkitTransform: `scale(${state.scale})`,
            width: prop.width + "px",
              overflowX: 'hidden'
        }
      }else if(prop.module === 'scrollX'){
        return {
             transform: `scale(1,${state.scale})`,
        WebkitTransform: `scale(1,${state.scale})`,
             height: prop.height + "px",
                overflowY: 'hidden'
        }
      }
      
      else if(prop.module === 'full'){
      return {
           transform: `scale(1) `,
        WebkitTransform: `scale(1)`,
  
        }
      }
       
})

    const state:any = reactive({
     scale: getScale(),
 })
onMounted(() => {
     getScale()
    window.addEventListener("resize", setScale)
})
   onUnmounted(() => {
     window.addEventListener("resize", setScale)
    })
</script>
<style  >
	body::-webkit-scrollbar {
		width: 0 !important;
    height: 0 !important;
	}
</style>
<style  scoped lang="scss" >
.scale-box {
  transform-origin: 0 0;
  position: absolute;
  left:0;
  top: 0;
  transition: 0.3s;
}


</style>
